frontend/src/components/ModuleForm.tsx (1)

272-279: Optional: force fresh search results and guard against cache staleness.

Search suggestions usually benefit from bypassing cache.

Apply:

-        const { data } = await client.query({
+        const { data } = await client.query({
           query: SearchProjectNamesDocument,
           variables: { query },
+          fetchPolicy: 'network-only',
         })

frontend/src/hooks/useDjangoSession.ts (3)

25-28: Nit: coerce shouldSync to a boolean.

As written, shouldSync is boolean | string due to accessToken. Coerce to boolean for clarity.

-    const shouldSync =
-      status === 'authenticated' &&
-      (session as ExtendedSession)?.accessToken &&
-      !sessionStorage.getItem(SYNC_STATUS_KEY)
+    const shouldSync =
+      status === 'authenticated' &&
+      Boolean((session as ExtendedSession)?.accessToken) &&
+      !sessionStorage.getItem(SYNC_STATUS_KEY)

---

45-49: Avoid possible TS nullability complaint on session.user.

Inside this block session is present, but TS won’t narrow. Assert via cast (or pre-destructure) to keep types happy.

-            update({
-              user: {
-                ...session.user,
-                isOwaspStaff: githubAuth.user?.isOwaspStaff,
-              },
-            }).then(() => {})
+            {
+              const { user } = session as ExtendedSession
+              update({
+                user: {
+                  ...user,
+                  isOwaspStaff: githubAuth.user?.isOwaspStaff,
+                },
+              }).then(() => {})
+            }

---

50-59: Toast may be lost due to signOut redirect.

signOut() redirects by default, so the toast likely won’t be visible. Either show the toast before signing out, or use redirect: false.

-          } else {
-            signOut() // Invalidate Next.js session if not ok.
-            addToast({
+          } else {
+            addToast({
               color: 'danger',
               description: githubAuth?.message,
               shouldShowTimeoutProgress: true,
               timeout: 4000,
               title: 'Authentication Failed',
               variant: 'bordered',
             })
+            void signOut({ redirect: false }) // Keep user on page so toast is visible.
           }

frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx (3)

37-70: Avoid orphaned redirect timer; add cleanup in effect

If the component unmounts or dependencies change before the timeout fires, the pending redirect persists. Track and clear the timer.

Apply:

 useEffect(() => {
   if (sessionStatus === 'loading' || queryLoading) {
     return
   }
 
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+
   if (
     queryError ||
     !data?.getProgram ||
     !data?.getModule ||
     sessionStatus === 'unauthenticated'
   ) {
     setAccessStatus('denied')
     return
   }
 
   const currentUserLogin = (sessionData as ExtendedSession)?.user?.login
   const isAdmin = data.getProgram.admins?.some(
     (admin: { login: string }) => admin.login === currentUserLogin
   )
 
   if (isAdmin) {
     setAccessStatus('allowed')
   } else {
     setAccessStatus('denied')
     addToast({
       title: 'Access Denied',
       description: 'Only program admins can edit modules.',
       color: 'danger',
       variant: 'solid',
       timeout: 4000,
     })
-    setTimeout(() => router.replace(`/my/mentorship/programs/${programKey}`), 1500)
+    timeoutId = setTimeout(
+      () => router.replace(`/my/mentorship/programs/${programKey}`),
+      1500
+    )
   }
-}, [sessionStatus, sessionData, queryLoading, data, programKey, queryError, router])
+  return () => {
+    if (timeoutId) clearTimeout(timeoutId)
+  }
+}, [sessionStatus, sessionData, queryLoading, data, programKey, queryError, router])

---

81-86: Default projectName to an empty string to keep inputs controlled

Prevents potential uncontrolled-to-controlled input warnings if projectName is undefined.

Apply:

-        projectName: m.projectName,
+        projectName: m.projectName || '',

---

27-35: Use generated typed documents for this query
Import the code-generated GetProgramAdminsAndModulesDocument and its corresponding GetProgramAdminsAndModulesQuery/GetProgramAdminsAndModulesQueryVariables types from src/types/__generated__/moduleQueries.generated.ts, then replace the legacy GET_PROGRAM_ADMINS_AND_MODULES constant in your useQuery call with the generated document and supply the proper generics. This will ensure full type safety and consistency with the rest of the codebase.

frontend/src/app/my/mentorship/programs/[programKey]/page.tsx (4)

29-30: Avoid duplicating server data in local state; prevent a 404 flicker on refetch

Because you set isRefetching=false before the useQuery data updates, users can briefly hit the 404 branch. Either derive program/modules directly from useQuery or set state from the awaited refetch() result.

Option A (simpler): derive

const { data } = useQuery(...)

const program = data?.getProgram ?? null
const modules = data?.getProgramModules ?? []

Option B (keep state): hydrate from refetch result

const { data: d } = await refetch()
setProgram(d?.getProgram ?? null)
setModules(d?.getProgramModules ?? [])

---

33-36: Replace TODO with fully typed mutation via codegen

Type the mutation to catch server/variable drift at compile time.

-  // TODO: update type
-  const [updateProgram] = useMutation(UPDATE_PROGRAM_STATUS_MUTATION, {
-    onError: handleAppError,
-  })
+  const [updateProgram] = useMutation<
+    UpdateProgramStatusMutation,
+    UpdateProgramStatusMutationVariables
+  >(UpdateProgramStatusDocument, { onError: handleAppError })

Add the import (outside this hunk):

import {
  UpdateProgramStatusDocument,
  UpdateProgramStatusMutation,
  UpdateProgramStatusMutationVariables,
} from 'types/__generated__/programsMutations.generated'

---

81-81: Ensure UI waits for refetch before showing success

To avoid toasts firing before the UI updates, wait for refetch completion or use onQueryUpdated.

       await updateProgram({
         variables: {
           inputData: {
             key: program.key,
             name: program.name,
             status: newStatus,
           },
         },
-        refetchQueries: [{ query: GetProgramAndModulesDocument, variables: { programKey } }],
+        refetchQueries: [{ query: GetProgramAndModulesDocument, variables: { programKey } }],
+        awaitRefetchQueries: true,
       })

In Apollo Client v4, refetchQueries supports passing DocumentNodes and variables; awaitRefetchQueries is still available, and returning a Promise from onQueryUpdated is the preferred alternative. (apollographql.com)

---

134-135: Don’t assert dates to string; guard or map scalar to avoid runtime “Invalid date”

Short-term guard (safer if nulls slip through):

-    { label: 'Start Date', value: formatDate(program.startedAt as string) },
-    { label: 'End Date', value: formatDate(program.endedAt as string) },
+    { label: 'Start Date', value: program.startedAt ? formatDate(program.startedAt as unknown as number | string) : 'N/A' },
+    { label: 'End Date', value: program.endedAt ? formatDate(program.endedAt as unknown as number | string) : 'N/A' },

Long-term: map your Date/DateTime scalar in codegen (e.g., DateTime: string) so these casts disappear.

frontend/src/app/my/mentorship/page.tsx (1)

34-34: Introduce a named alias for readability and reuse

The inline indexed access type is correct but hard to scan and reuse.

Apply:

-const [programs, setPrograms] = useState<GetMyProgramsQuery['myPrograms']['programs']>([])
+const [programs, setPrograms] = useState<MyProgram[]>([])

Add near the imports:

type MyProgram = GetMyProgramsQuery['myPrograms']['programs'][number]

frontend/src/app/page.tsx (1)

49-52: Tighten types and loading checks (optional).

• State typing: allow null in the state to match the initial value.
• Loading gate: consider waiting on Algolia data too to avoid map flashing.

Apply:

-  const [data, setData] = useState<MainPageData>(null)
+  const [data, setData] = useState<MainPageData | null>(null)

-  if (isLoading || !graphQLData || !geoLocData) {
+  if (isLoading || !graphQLData || geoLocData.length === 0) {
     return <LoadingSpinner />
   }

Also applies to: 94-96

frontend/src/components/CardDetailsPage.tsx (1)

38-38: Convert the TODO into a concrete typing task.

Two low-risk wins:

• Narrow prop types on SocialLinks.
• Ensure props with .length (e.g., healthMetricsData) are typed as arrays.

Apply:

-export const SocialLinks = ({ urls }) => {
+export const SocialLinks = ({ urls }: { urls: string[] }) => {

If you’d like, I can open a follow-up issue to “type tighten” DetailsCardProps and children.

frontend/src/hooks/useLogout.ts (1)

1-1: Import path is correct; consider using useApolloClient for cache ops.

Sticking to the React entrypoint is right. For cache clearing, AC v4 recommends using the client directly via useApolloClient() for imperative work, which keeps the mutation tuple focused on UI state. Use clearStore() (no refetch) or resetStore() (refetch active queries) per your UX. (apollographql.com)

Apply:

-import { useMutation } from '@apollo/client/react'
+import { useMutation, useApolloClient } from '@apollo/client/react'
@@
 export const useLogout = () => {
-  const [logoutUser, { loading, client }] = useMutation(LOGOUT_DJANGO_MUTATION)
+  const [logoutUser, { loading }] = useMutation(LOGOUT_DJANGO_MUTATION)
+  const client = useApolloClient()
@@
-      await client.clearStore() // Removes Apollo cache
+      await client.clearStore() // Removes Apollo cache (no refetch)

Note: per past learnings, some call sites intentionally invoke logout() and signOut() both—don’t dedupe unless you plan to adjust those call sites too.

frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx (1)

2-2: Correct migration: import hooks from @apollo/client/react.

Matches AC v4 guidance. If/when you switch this page to codegen TypedDocumentNodes, AC v4 will infer variable/result types from the document directly. (apollographql.com)

If you want, I can prep a follow-up patch to replace CREATE_MODULE/GET_PROGRAM_ADMIN_DETAILS with generated ...Document artifacts for stronger typing.

frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx (2)

70-75: Use an anchor for external URLs (accessibility + expected behavior).

Next.js Link is intended for internal routes.

-        <Link href={repository.url} className="text-blue-400 hover:underline">
-          {repository.url}
-        </Link>
+        <a
+          href={repository.url}
+          className="text-blue-400 hover:underline"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {repository.url}
+        </a>

---

30-41: Tidy useEffect deps.

repositoryKey isn’t referenced inside the effect; either remove it or include organizationKey too for symmetry.

-  }, [data, graphQLRequestError, repositoryKey])
+  }, [data, graphQLRequestError])

frontend/src/utils/helpers/apolloClient.ts (1)

18-27: Optional: centralize GraphQL error logging with an errorLink.

Helps unify toasts/logging instead of per-call try/catch.

+import { onError } from '@apollo/client/link/error'
@@
-  const authLink = setContext(async (_, { headers }) => {
+  const authLink = setContext(async (_, { headers }) => {
     const csrfToken = await getCsrfToken()
@@
   })
+
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors?.length || networkError) {
+      handleAppError(new AppError(500, 'GraphQL Request Failed'))
+    }
+  })
@@
-  return new ApolloClient({
+  return new ApolloClient({
     cache: new InMemoryCache(),
-    link: authLink.concat(httpLink),
+    link: errorLink.concat(authLink).concat(httpLink),
   })

frontend/src/app/chapters/[chapterKey]/page.tsx (1)

70-70: Address the TODO comment.

The TODO indicates a type issue with the geolocationData prop.

Would you like me to help resolve the type issue with the geolocationData prop in the DetailsCard component?

frontend/src/app/about/page.tsx (2)

68-73: Reduce state duplication — derive UI straight from query results.

projectMetadata and topContributors mirror data and require effects to sync. Prefer reading projectMetadataResponse?.project and topContributorsResponse?.topContributors directly to avoid extra renders and stale state.

If you want, I can push a minimal diff that inlines these and drops both effects.

Also applies to: 75-94, 101-113

---

273-275: Tighten type: user is non-null here.

After the null-guard above, make the parameter non-null to prevent accidental misuse elsewhere.

-  const handleButtonClick = (user: GetLeaderDataQuery['user']) => {
+  const handleButtonClick = (user: NonNullable<GetLeaderDataQuery['user']>) => {
     router.push(`/members/${user.login}`)
   }

frontend/src/app/organizations/[organizationKey]/page.tsx (2)

14-14: Add strong types for local state from codegen.

State is any-ish as null. Use GetOrganizationDataQuery to keep props/consumers type-safe.

-import { GetOrganizationDataDocument } from 'types/__generated__/organizationQueries.generated'
+import {
+  GetOrganizationDataDocument,
+} from 'types/__generated__/organizationQueries.generated'
+import type { GetOrganizationDataQuery } from 'types/__generated__/organizationQueries.generated'

-  const [organization, setOrganization] = useState(null)
-  const [issues, setIssues] = useState(null)
-  const [milestones, setMilestones] = useState(null)
-  const [pullRequests, setPullRequests] = useState(null)
-  const [releases, setReleases] = useState(null)
-  const [repositories, setRepositories] = useState(null)
-  const [topContributors, setTopContributors] = useState(null)
+  const [organization, setOrganization] =
+    useState<GetOrganizationDataQuery['organization'] | null>(null)
+  const [issues, setIssues] =
+    useState<GetOrganizationDataQuery['recentIssues'] | null>(null)
+  const [milestones, setMilestones] =
+    useState<GetOrganizationDataQuery['recentMilestones'] | null>(null)
+  const [pullRequests, setPullRequests] =
+    useState<GetOrganizationDataQuery['recentPullRequests'] | null>(null)
+  const [releases, setReleases] =
+    useState<GetOrganizationDataQuery['recentReleases'] | null>(null)
+  const [repositories, setRepositories] =
+    useState<GetOrganizationDataQuery['repositories'] | null>(null)
+  const [topContributors, setTopContributors] =
+    useState<GetOrganizationDataQuery['topContributors'] | null>(null)

Also applies to: 20-27

---

28-30: Optional: rely on useQuery’s loading instead of a local isLoading state.

This simplifies logic and prevents edge cases where local state and hook state drift.

I can provide a follow-up diff if you want this simplified.

Also applies to: 32-47, 49-54

frontend/src/app/snapshots/[id]/page.tsx (2)

169-172: Keys and nullable dates.

• Use a stable key (release.id) instead of tagName-index.
• Guard publishedAt (nullable) to avoid “Released: ” with empty date.

-            {snapshot.newReleases.map((release, index) => (
+            {snapshot.newReleases.map((release) => (
               <div
-                key={`${release.tagName}-${index}`}
+                key={release.id}
                 className="overflow-hidden rounded-lg border-1 border-gray-200 bg-white shadow-xs transition-all hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
               >
...
-                    Released: {formatDate(release.publishedAt as string)}
+                    Released:{' '}
+                    {release.publishedAt
+                      ? formatDate(release.publishedAt as string)
+                      : 'TBD'}

Also applies to: 190-191

---

13-15: Unify types with codegen to drop casts and TODOs.

renderProjectCard/renderChapterCard take app-local types while you pass codegen objects; plus you cast scalars to string. Prefer codegen types for the render helpers.

-import type { Chapter } from 'types/chapter'
-import type { Project } from 'types/project'
+// Use codegen types to match the query payload
+type SnapshotProject = NonNullable<GetSnapshotDetailsQuery['snapshot']>['newProjects'][number]
+type SnapshotChapter = NonNullable<GetSnapshotDetailsQuery['snapshot']>['newChapters'][number]

-  const renderProjectCard = (project: Project) => {
+  const renderProjectCard = (project: SnapshotProject) => {
...
-  const renderChapterCard = (chapter: Chapter) => {
+  const renderChapterCard = (chapter: SnapshotChapter) => {

Consider mapping GraphQL scalars in codegen (e.g., DateTime -> string) to eliminate as string casts project-wide.

Also applies to: 43-69, 71-97, 153-163

frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx (3)

17-17: Prefer casting over a generic for useParams (Next.js types aren’t generic).

Keeps consistency with other files and avoids type errors across Next versions.

-  const { programKey, moduleKey } = useParams<{ programKey: string; moduleKey: string }>()
+  const { programKey, moduleKey } = useParams() as { programKey: string; moduleKey: string }

---

54-59: Reduce “as string” casts by mapping date scalars in codegen.

startedAt/endedAt are unknown due to codegen config. Map your GraphQL Date/DateTime scalars to string in codegen to restore type-safety and drop the casts here.

Example (codegen.yml):

config:
  scalars:
    DateTime: string
    Date: string

Then rerun codegen and remove the as string casts at call sites.

---

19-41: Optional: derive UI state from Apollo instead of mirroring it.

You can drop local module/admins/isLoading state and use const { data, error, loading } = useQuery(...), then read from data directly. Less state, fewer effects, fewer edge cases.

frontend/src/app/snapshots/page.tsx (1)

16-26: Optional: use Apollo’s loading and avoid local isLoading/effect bookkeeping.

Simplifies control flow and removes a class of race conditions around manual loading flags.

-  const [snapshots, setSnapshots] = useState<GetCommunitySnapshotsQuery['snapshots'] | null>(null)
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-
-  const { data: graphQLData, error: graphQLRequestError } = useQuery(GetCommunitySnapshotsDocument)
+  const { data: graphQLData, error: graphQLRequestError, loading } =
+    useQuery(GetCommunitySnapshotsDocument)
+  const snapshots = graphQLData?.snapshots ?? null
@@
-    if (graphQLData) {
-      setSnapshots(graphQLData.snapshots)
-      setIsLoading(false)
-    }
     if (graphQLRequestError) {
       addToast({
@@
-      setIsLoading(false)
     }
   }, [graphQLData, graphQLRequestError])
@@
-  if (isLoading) {
+  if (loading) {
     return <LoadingSpinner />
   }

Also applies to: 63-66

frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx (2)

77-79: Drop as string casts by mapping date scalars in codegen.

Same rationale as other files; makes formatDateForInput calls type-safe.

-        startedAt: formatDateForInput(program.startedAt as string),
-        endedAt: formatDateForInput(program.endedAt as string),
+        startedAt: formatDateForInput(program.startedAt),
+        endedAt: formatDateForInput(program.endedAt),

(After adding DateTime: string mapping in codegen.)

---

19-20: Consistency nit: match useParams typing style used across pages.

Here you cast; in modules page you used a generic. Pick one (casting is safer with Next types) to avoid drift.

frontend/src/app/projects/[projectKey]/page.tsx (2)

21-21: Prefer Apollo’s loading state over bespoke isLoading.

Leverage the loading flag from useQuery to avoid manual state bookkeeping and edge cases on param changes.

Apply this diff:

-  const [isLoading, setIsLoading] = useState<boolean>(true)
+  // Rely on Apollo's loading flag

   const { data, error: graphQLRequestError } = useQuery(GetProjectDocument, {
     variables: { key: projectKey },
   })

   useEffect(() => {
     if (data) {
       setProject(data.project)
       setTopContributors(data.topContributors)
-      setIsLoading(false)
     }
     if (graphQLRequestError) {
       handleAppError(graphQLRequestError)
-      setIsLoading(false)
     }
   }, [data, graphQLRequestError, projectKey])

-  if (isLoading) {
+  // Show spinner while the query is loading
+  if (!project && !graphQLRequestError) {
     return <LoadingSpinner />
   }

Also applies to: 27-37, 39-41

---

27-37: Unnecessary dependency.

projectKey in the effect dependencies isn’t used inside the effect and will cause extra runs on param changes.

-  }, [data, graphQLRequestError, projectKey])
+  }, [data, graphQLRequestError])

frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx (2)

19-19: Type admins state explicitly.

Avoid implicit any; align with generated types.

-  const [admins, setAdmins] = useState(null)
+  const [admins, setAdmins] = useState<
+    GetProgramAdminsAndModulesQuery['getProgram']['admins']
+  >(null)

---

22-27: Use Apollo loading instead of manual isLoading.

Same suggestion as other pages for consistency and fewer states.

-  const [isLoading, setIsLoading] = useState(true)
-  const { data, error } = useQuery(GetProgramAdminsAndModulesDocument, {
+  const { data, error, loading } = useQuery(GetProgramAdminsAndModulesDocument, {
     variables: { programKey, moduleKey },
   })
@@
-  if (isLoading) return <LoadingSpinner />
+  if (loading) return <LoadingSpinner />

Also applies to: 40-41

frontend/src/app/members/[memberKey]/page.tsx (1)

23-31: Minor state/flow cleanups.

• Initialize user to null to avoid undefined in unions.
• Prefer Apollo loading flag over manual isLoading for consistency.

-  const [user, setUser] = useState<GetUserDataQuery['user'] | null>()
+  const [user, setUser] = useState<GetUserDataQuery['user'] | null>(null)
@@
-  const [isLoading, setIsLoading] = useState<boolean>(true)
+  // Rely on Apollo 'loading'
@@
-  const { data: graphQLData, error: graphQLRequestError } = useQuery(GetUserDataDocument, {
+  const { data: graphQLData, error: graphQLRequestError, loading } = useQuery(GetUserDataDocument, {
     variables: { key: memberKey },
   })
@@
-  if (isLoading) {
+  if (loading) {
     return <LoadingSpinner />
   }
@@
-  if (!isLoading && user == null) {
+  if (!loading && user == null) {
     return (

Also applies to: 106-118, 211-225

frontend/src/app/settings/api-keys/page.tsx (10)

37-37: Small type alias to reduce repetition

Define an alias for readability and reuse.

-const [keyToRevoke, setKeyToRevoke] = useState<GetApiKeysQuery['apiKeys'][0] | null>(null)
+type ApiKey = GetApiKeysQuery['apiKeys'][number]
+const [keyToRevoke, setKeyToRevoke] = useState<ApiKey | null>(null)

---

39-42: Don’t block on errors when errorPolicy='all'

With errorPolicy: 'all', you may have both data and error; current ternary hides partial data. Gate the error block on !data.

-          {error ? (
+          {error && !data ? (
             <div className="rounded-md bg-red-50 p-4 text-red-700 dark:bg-red-900/20 dark:text-red-400">
               Error loading API keys
             </div>
           ) : loading ? (

Optionally surface a non-blocking banner when error && data.

Also applies to: 217-229

---

105-114: Validate expiry and send ISO string to avoid TZ ambiguity

Ensure date isn’t in the past and serialize as ISO (servers usually expect strings).

-  const variables: { name: string; expiresAt: Date } = {
-    name: newKeyName.trim(),
-    expiresAt: new Date(newKeyExpiry),
-  }
-  createApiKey({ variables })
+  const expiry = new Date(newKeyExpiry)
+  const today = new Date(); today.setHours(0,0,0,0)
+  if (isNaN(expiry.getTime()) || expiry < today) {
+    addToast({ title: 'Error', description: 'Expiration must be today or later', color: 'danger' })
+    return
+  }
+  createApiKey({
+    variables: { name: newKeyName.trim(), expiresAt: expiry.toISOString() },
+  })

Consider mapping scalars in codegen so DateTime/UUID are typed as strings (see separate comment).

---

68-76: Disable revoke button while mutation is in flight

Prevents double submissions and accidental repeats.

-const [revokeApiKey] = useMutation(RevokeApiKeyDocument, {
+const [revokeApiKey, { loading: revokeLoading }] = useMutation(RevokeApiKeyDocument, {
   onCompleted: () => {

-            <Button color="danger" onPress={handleRevokeKey}>
+            <Button color="danger" onPress={handleRevokeKey} isDisabled={revokeLoading}>
               Revoke Key
             </Button>

Also applies to: 430-432

---

80-81: Compute default expiry on open to avoid stale “30 days from today”

Minor UX nit if the page stays open across midnight.

-const defaultExpiryDate = format(addDays(new Date(), 30), 'yyyy-MM-dd')
...
-  setNewKeyExpiry(defaultExpiryDate)
+  setNewKeyExpiry(format(addDays(new Date(), 30), 'yyyy-MM-dd'))

Also applies to: 137-140

---

242-252: Prefer stable string types and avoid casts; consider codegen scalar mapping

Use id (string) for React key, and coerce with String(...) over as-casts. Also, map GraphQL scalars to real TS types to remove unknowns.

-{data.apiKeys.map((key: GetApiKeysQuery['apiKeys'][0]) => (
+{data.apiKeys.map((key: GetApiKeysQuery['apiKeys'][number]) => (
   <tr
-    key={key.uuid as string}
+    key={key.id}
     className="border-b border-b-gray-200 dark:border-b-gray-700"
   >
     <td className="py-3">{key.name}</td>
-    <td className="py-3 font-mono text-sm">{key.uuid as string}</td>
-    <td className="py-3">{format(new Date(key.createdAt as string), 'PP')}</td>
+    <td className="py-3 font-mono text-sm">{String(key.uuid)}</td>
+    <td className="py-3">{format(new Date(String(key.createdAt)), 'PP')}</td>
     <td className="py-3">
-      {key.expiresAt ? format(new Date(key.expiresAt as string), 'PP') : 'Never'}
+      {key.expiresAt ? format(new Date(String(key.expiresAt)), 'PP') : 'Never'}
     </td>

Codegen (typescript plugin) suggestion to remove unknowns:

# codegen.yml
generates:
  frontend/src/types/__generated__/:
    plugins:
      - typescript
      - typescript-operations
    config:
      scalars:
        DateTime:
          input: string
          output: string
        UUID:
          input: string
          output: string

---

234-234: Tailwind class nit: 'border-b-1' isn’t a default utility

Use 'border-b' or an arbitrary value 'border-b-[1px]'.

-<tr className="border-b-1 border-b-gray-200 dark:border-b-gray-700">
+<tr className="border-b border-b-gray-200 dark:border-b-gray-700">

---

192-195: Wording: use “revoke” to match the action

Align the guidance with the button/action label.

-You've reached the maximum number of API keys. Delete an existing key to create
+You've reached the maximum number of API keys. Revoke an existing key to create

---

150-158: Type safety when passing uuid to mutation

uuid is typed unknown in generated types; explicit string coercion avoids TS complaints and accidental non-string values.

-        await revokeApiKey({ variables: { uuid: keyToRevoke.uuid } })
+        await revokeApiKey({ variables: { uuid: String(keyToRevoke.uuid) } })

---

248-251: Potential date off-by-one in some timezones

If backend stores midnight UTC, local formatting can show the prior day. Consider storing/displaying local midnight or using date-fns-tz’s formatInTimeZone to render in UTC.

Would you like a patch using date-fns-tz (formatInTimeZone) to render consistently?

frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx (2)

42-52: Optional: avoid mirroring server data in local state

You can render directly from data?.project and drop the useEffect + two useStates to reduce re-renders and state sync risks. Happy to draft a refactor if you want.

---

58-64: Guard scalar parsing instead of unknown → string cast

createdAt is unknown (custom scalar). Prefer safe coercion or map the scalar to string in codegen.

-  const labels =
-    metricsList?.map((m) =>
-      new Date(m.createdAt as string).toLocaleString('default', {
+  const labels =
+    metricsList?.map(({ createdAt }) =>
+      new Date(String(createdAt)).toLocaleString('default', {
         month: 'short',
         day: 'numeric',
       })
     ) || []

Alternatively, map your GraphQL Date/DateTime scalar to string in codegen.

frontend/src/app/projects/dashboard/metrics/page.tsx (3)

89-93: Nit: remove redundant || fallback

currentOrdering is always truthy. Drop the || to simplify.

-  const [ordering, setOrdering] = useState(
-    currentOrdering || {
-      score: Ordering.Desc,
-    }
-  )
+  const [ordering, setOrdering] = useState(currentOrdering)

---

98-115: Consider explicit error handling policy with v4 defaults

In v4, notifyOnNetworkStatusChange defaults to true, and error handling semantics are unified. If you expect partial data alongside errors, set errorPolicy: 'all'. Otherwise, you may see more loading transitions. (apollographql.com)

   } = useQuery(GetProjectHealthMetricsDocument, {
     variables: {
       filters,
       pagination: { offset: 0, limit: PAGINATION_LIMIT },
       ordering: [
         ordering,
         {
           // eslint-disable-next-line @typescript-eslint/naming-convention
           project_Name: Ordering.Asc,
         },
       ],
     },
+    // Optional: opt into partial data + errors
+    // errorPolicy: 'all',
   })

---

244-245: Follow-up: update MetricsCard prop types, remove TODO

Define metric as the generated item type to get full type coverage.

Example (in MetricsCard.tsx):

import type { GetProjectHealthMetricsQuery } from 'types/__generated__/projectsHealthDashboardQueries.generated'
type MetricT = GetProjectHealthMetricsQuery['projectHealthMetrics'][number];

export interface MetricsCardProps {
  metric: MetricT;
}

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS is actively used in frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx for program editing functionality and cannot be removed. It serves a different purpose than GET_PROGRAM_ADMIN_DETAILS, providing comprehensive program information needed for editing.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/components/ModuleCard.tsx:53-55
Timestamp: 2025-07-13T07:31:06.511Z
Learning: In Next.js 13+ app router, useRouter from 'next/navigation' does not provide asPath or query properties. Use useParams to extract route parameters and usePathname to get the current pathname instead.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/app/mentorship/programs/page.tsx:59-61
Timestamp: 2025-07-13T11:29:25.245Z
Learning: In Next.js 13+ app router, components with the 'use client' directive run entirely on the client side and don't require window object existence checks or SSR hydration considerations. Direct access to window.location and other browser APIs is safe in client components.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/components/UserMenu.tsx:56-60
Timestamp: 2025-07-11T15:46:58.233Z
Learning: In the UserMenu component's handleLogout function, both logout() and signOut() calls are intentionally kept despite the useLogout hook already calling signOut internally, as this is necessary for the specific implementation requirements.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS and GET_PROGRAM_ADMIN_DETAILS are two separate queries serving different purposes: GET_PROGRAM_DETAILS fetches comprehensive program information while GET_PROGRAM_ADMIN_DETAILS fetches only admin-related details. These queries cannot be removed or merged as they serve different use cases in the application.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS and GET_PROGRAM_ADMIN_DETAILS are two separate queries serving different purposes: GET_PROGRAM_DETAILS fetches comprehensive program information while GET_PROGRAM_ADMIN_DETAILS fetches only admin-related details.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: backend/apps/mentorship/graphql/mutations/program.py:41-44
Timestamp: 2025-07-08T17:24:36.501Z
Learning: In the mentorship program GraphQL mutations, date validation is handled at the GraphQL schema/node level in the input types (CreateProgramInput, UpdateProgramInput), preventing null values from reaching the mutation logic where date comparisons are performed.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/app/mentorship/programs/[programKey]/edit/page.tsx:90-128
Timestamp: 2025-07-12T17:14:28.536Z
Learning: Both ProgramForm (programCard.tsx) and ModuleForm (mainmoduleCard.tsx) components already implement HTML validation using the `required` attribute on form fields. The browser's native validation prevents form submission and displays error messages when required fields are empty, eliminating the need for additional JavaScript validation before GraphQL mutations.

Learnt from: ahmedxgouda
PR: OWASP/Nest#1633
File: frontend/src/components/HealthMetrics.tsx:30-30
Timestamp: 2025-06-20T16:12:59.256Z
Learning: In the DetailsCard component (frontend/src/components/CardDetailsPage.tsx), there's a length check before rendering HealthMetrics: `healthMetricsData.length > 0`. This ensures that when HealthMetrics is rendered, the data array has at least one element, making accessing data[0] safe within the HealthMetrics component.

Learnt from: ahmedxgouda
PR: OWASP/Nest#1633
File: frontend/src/components/HealthMetrics.tsx:30-30
Timestamp: 2025-06-20T16:12:59.256Z
Learning: In the DetailsCard component (frontend/src/components/CardDetailsPage.tsx), there's a safety check that ensures HealthMetrics component is only rendered when healthMetricsData exists and has at least one element: `healthMetricsData && healthMetricsData.length > 0`. This makes accessing data[0] safe within the HealthMetrics component.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/app/mentorship/programs/page.tsx:14-14
Timestamp: 2025-07-13T11:34:31.823Z
Learning: In the Next.js frontend mentorship application, there are two distinct types for authentication-related data: ExtendedSession for useSession hook (containing accessToken and user.login properties) and UserRolesData for useUserRoles hook (containing currentUserRoles.roles array). The correct access pattern for GitHub username is `(session as ExtendedSession)?.user?.login`.

frontend/src/app/snapshots/page.tsx (1)

40-42: Prefer a readable item alias and let map infer the element type.

Use a SnapshotItem alias ([number] index) and drop the explicit element type in map. This mirrors prior feedback.

Apply this diff:

-  const handleButtonClick = (snapshot: GetCommunitySnapshotsQuery['snapshots'][0]) => {
+  const handleButtonClick = (snapshot: SnapshotItem) => {
     router.push(`/snapshots/${snapshot.key}`)
   }

-  const renderSnapshotCard = (snapshot: GetCommunitySnapshotsQuery['snapshots'][0]) => {
+  const renderSnapshotCard = (snapshot: SnapshotItem) => {

-            snapshots.map((snapshot: GetCommunitySnapshotsQuery['snapshots'][0]) => (
+            snapshots.map((snapshot) => (
               <div key={snapshot.key}>{renderSnapshotCard(snapshot)}</div>
             ))

Add this alias near the imports (outside the diffed ranges):

type SnapshotItem = GetCommunitySnapshotsQuery['snapshots'][number]

Also applies to: 44-50, 73-75

frontend/src/app/snapshots/[id]/page.tsx (1)

144-145: Remove stray whitespace text node to satisfy Biome rule.

This is the same issue previously flagged; the {' '} child is unnecessary here.

-            {' '}
             {snapshot.newChapters.filter((chapter) => chapter.isActive).map(renderChapterCard)}

frontend/src/utils/utility.ts (2)

7-7: Use type-only import to avoid emitting runtime code.

Switch to a type import for the generated GraphQL type.

-import { GetSnapshotDetailsQuery } from 'types/__generated__/snapshotQueries.generated'
+import type { GetSnapshotDetailsQuery } from 'types/__generated__/snapshotQueries.generated'

---

29-36: Harden createdAt handling and tighten types for params/reduce accumulator.

• Accept only known icon keys in params.
• Support both numeric (sec/ms) and string timestamps for createdAt.
• Type the reducer accumulator as Partial<Icon> to avoid {}-as-Icon casts leaking.

-export const getFilteredIcons = (project: ProjectType, params: string[]): Icon => {
-  const filteredIcons = params.reduce((acc: Icon, key) => {
+export const getFilteredIcons = (project: ProjectType, params: readonly IconKeys[]): Icon => {
+  const filteredIcons = params.reduce<Partial<Icon>>((acc, key) => {
     if (ICONS[key as IconKeys] && project[key as keyof typeof project] !== undefined) {
       if (key === 'createdAt') {
-        acc[key] = dayjs.unix(project[key as keyof ProjectType] as unknown as number).fromNow()
+        const raw = project[key as keyof ProjectType] as unknown
+        const d =
+          typeof raw === 'number'
+            ? (raw > 1_000_000_000_000 ? dayjs(raw) : dayjs.unix(raw))
+            : dayjs(raw as string)
+        if (d.isValid()) acc[key] = d.fromNow()
       } else {
-        acc[key] = project[key as keyof typeof project] as unknown as number
+        acc[key] = project[key as keyof ProjectType] as unknown as number
       }
     }
     return acc
-  }, {})
+  }, {})
 
-  return filteredIcons
+  return filteredIcons as Icon
 }

Also applies to: 41-41

frontend/src/app/snapshots/page.tsx (2)

15-19: Remove mirrored state; rely on Apollo’s loading/data to simplify and avoid effect churn.

isLoading and snapshots duplicate useQuery state and add unnecessary effects (can also double-fire toasts under React StrictMode). Derive from useQuery instead.

Apply this diff:

-  const [snapshots, setSnapshots] = useState<GetCommunitySnapshotsQuery['snapshots'] | null>(null)
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-
-  const { data: graphQLData, error: graphQLRequestError } = useQuery(GetCommunitySnapshotsDocument)
+  const { data, error, loading } = useQuery(GetCommunitySnapshotsDocument)
+  const snapshots = data?.snapshots ?? []

-  useEffect(() => {
-    if (graphQLData) {
-      setSnapshots(graphQLData.snapshots)
-      setIsLoading(false)
-    }
-    if (graphQLRequestError) {
-      addToast({
-        description: 'Unable to complete the requested operation.',
-        title: 'GraphQL Request Failed',
-        timeout: 3000,
-        shouldShowTimeoutProgress: true,
-        color: 'danger',
-        variant: 'solid',
-      })
-      setIsLoading(false)
-    }
-  }, [graphQLData, graphQLRequestError])
+  useEffect(() => {
+    if (error) {
+      addToast({
+        description: 'Unable to complete the requested operation.',
+        title: 'GraphQL Request Failed',
+        timeout: 3000,
+        shouldShowTimeoutProgress: true,
+        color: 'danger',
+        variant: 'solid',
+      })
+    }
+  }, [error])

-  if (isLoading) {
+  if (loading) {
     return <LoadingSpinner />
   }

-          {!snapshots?.length ? (
+          {!snapshots.length ? (
             <div className="col-span-full py-8 text-center">No Snapshots found</div>
           ) : (
             snapshots.map((snapshot: GetCommunitySnapshotsQuery['snapshots'][0]) => (
               <div key={snapshot.key}>{renderSnapshotCard(snapshot)}</div>
             ))
           )}

Additionally, remove useState from the React import:

- import React, { useState, useEffect } from 'react'
+ import React, { useEffect } from 'react'

Also applies to: 20-36, 62-64, 70-76

---

53-53: Avoid double keys and an extra wrapper node.

You set key on <SnapshotCard> and also on the wrapping <div>. Keep one. Easiest: remove the wrapper and map directly to the card-returning renderer.

Apply this diff:

-            snapshots.map((snapshot) => (
-              <div key={snapshot.key}>{renderSnapshotCard(snapshot)}</div>
-            ))
+            snapshots.map(renderSnapshotCard)

Also applies to: 73-75

frontend/src/app/my/mentorship/programs/[programKey]/page.tsx (5)

29-31: Avoid mirroring Apollo data in local state.

Storing program/modules in state and syncing via useEffect risks staleness and extra renders. Prefer deriving directly from data.

Example (outside this hunk): after the useQuery(...) call, derive:

const program = data?.getProgram ?? null
const modules = data?.getProgramModules ?? []

Then remove the setProgram/setModules calls in the effect.

---

41-45: Consider cache-and-network for snappier UX.

If acceptable, fetch from cache first while updating in background.

   } = useQuery(GetProgramAndModulesDocument, {
     variables: { programKey },
     skip: !programKey,
     notifyOnNetworkStatusChange: true,
+    fetchPolicy: 'cache-and-network',
   })

---

144-144: Resolve TODO: type modules prop and align accessLevel with actual role.

• Update DetailsCard prop to accept GetProgramAndModulesQuery['getProgramModules'] to drop the TODO.
• Consider accessLevel={isAdmin ? 'admin' : 'read'} to avoid overexposing actions when the viewer isn’t an admin.

I can open a follow-up to type DetailsCard correctly and thread accessLevel from isAdmin. Want me to draft it?

---

2-2: Import Apollo hooks from @apollo/client/react everywhere. Test files are still importing hooks (e.g. useQuery, useMutation, useApolloClient) from @apollo/client; update those to the @apollo/client/react subpath to maintain repo-wide consistency and avoid mixed entry points.

---

71-81: Add awaitRefetchQueries to the mutation call
Ensure the mutation’s returned promise waits for the refetch by adding awaitRefetchQueries: true alongside refetchQueries—the input shape already includes name, so no changes needed there.

frontend/src/app/snapshots/[id]/page.tsx (5)

9-12: Good switch to generated Document and typed query.

This enables end-to-end type inference for useQuery.

If possible, also export and use the generated GetSnapshotDetailsQueryVariables for extra safety on variables.

---

21-22: Tighten snapshot state type.

GetSnapshotDetailsQuery['snapshot'] already includes null, so the extra "| null" is redundant.

-  const [snapshot, setSnapshot] = useState<GetSnapshotDetailsQuery['snapshot'] | null>(null)
+  const [snapshot, setSnapshot] = useState<GetSnapshotDetailsQuery['snapshot']>(null)

---

26-28: Guard the query until the route param is available; consider relying on useQuery.loading.

Add skip: !snapshotKey to avoid a spurious request with undefined variables. Optional: favor loading from useQuery over a parallel isLoading state/effect to reduce race conditions.

-  const { data: graphQLData, error: graphQLRequestError } = useQuery(GetSnapshotDetailsDocument, {
-    variables: { key: snapshotKey },
-  })
+  const { data: graphQLData, error: graphQLRequestError } = useQuery(GetSnapshotDetailsDocument, {
+    variables: { key: snapshotKey },
+    skip: !snapshotKey,
+  })

---

186-186: Handle nullable publishedAt without string cast; prefer a readable fallback.

Also consider using release.id as the React key instead of tag/index (outside this hunk).

-                    Released: {formatDate(release.publishedAt as string)}
+                    Released: {release.publishedAt ? formatDate(release.publishedAt as number | string) : 'TBD'}

Outside this hunk, change the item key to a stable id:

key={release.id}

---

9-12: Codegen scalars mapping to remove “unknown” dates (one-time config).

Map server date/timestamp scalars to concrete TS types so casts disappear and type-safety improves.

Add to codegen config:

generates:
  frontend/src/types/__generated__/:
    plugins:
      - typescript
      - typescript-operations
    config:
      scalars:
        DateTime: string
        Timestamp: number
        Date: string

Then re-run codegen and replace the remaining as number | string casts.

Also applies to: 123-123, 186-186

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/components/ModuleCard.tsx:53-55
Timestamp: 2025-07-13T07:31:06.511Z
Learning: In Next.js 13+ app router, useRouter from 'next/navigation' does not provide asPath or query properties. Use useParams to extract route parameters and usePathname to get the current pathname instead.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS is actively used in frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx for program editing functionality and cannot be removed. It serves a different purpose than GET_PROGRAM_ADMIN_DETAILS, providing comprehensive program information needed for editing.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS and GET_PROGRAM_ADMIN_DETAILS are two separate queries serving different purposes: GET_PROGRAM_DETAILS fetches comprehensive program information while GET_PROGRAM_ADMIN_DETAILS fetches only admin-related details. These queries cannot be removed or merged as they serve different use cases in the application.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS and GET_PROGRAM_ADMIN_DETAILS are two separate queries serving different purposes: GET_PROGRAM_DETAILS fetches comprehensive program information while GET_PROGRAM_ADMIN_DETAILS fetches only admin-related details.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: backend/apps/mentorship/graphql/mutations/program.py:41-44
Timestamp: 2025-07-08T17:24:36.501Z
Learning: In the mentorship program GraphQL mutations, date validation is handled at the GraphQL schema/node level in the input types (CreateProgramInput, UpdateProgramInput), preventing null values from reaching the mutation logic where date comparisons are performed.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/app/mentorship/programs/page.tsx:59-61
Timestamp: 2025-07-13T11:29:25.245Z
Learning: In Next.js 13+ app router, components with the 'use client' directive run entirely on the client side and don't require window object existence checks or SSR hydration considerations. Direct access to window.location and other browser APIs is safe in client components.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/app/mentorship/programs/page.tsx:14-14
Timestamp: 2025-07-13T11:34:31.823Z
Learning: In the Next.js frontend mentorship application, there are two distinct types for authentication-related data: ExtendedSession for useSession hook (containing accessToken and user.login properties) and UserRolesData for useUserRoles hook (containing currentUserRoles.roles array). The correct access pattern for GitHub username is `(session as ExtendedSession)?.user?.login`.

frontend/src/types/chapter.ts (1)

5-18: Avoid blanket-optionalizing Chapter; prefer query-specific/generated types or local Partial/Pick.

Most Chapter fields shouldn't be blanket-optional — keep Chapter strict and either use GraphQL‑codegen selection types per query (Apollo v4) or introduce a derived partial for call sites. Suggested helper: export type ChapterPartial = Partial

frontend/src/types/committee.ts (1)

16-16: Make topContributors required (or explicitly nullable)

GraphQL codegen shows topContributors as a non-null array — prefer a required array and normalise upstream to [] (or use explicit null union if the schema can return null).

Location: frontend/src/types/committee.ts:16

Suggested change:

-  topContributors?: Contributor[]
+  topContributors: Contributor[]  // ensure upstream maps undefined/null to []

Call sites/tests to update: frontend/tests/unit/components/CardDetailsPage.test.tsx:1074 and 1195-1196 (these pass topContributors={undefined}).

frontend/src/types/pullRequest.ts (2)

3-5: Document why author is nullable.

A brief note will prevent churn and clarify expectations for consumers.

Apply:

 export type PullRequest = {
-  author?: User
+  // author may be undefined if not returned by the API or omitted from the selection set
+  author?: User

---

3-10: Optional: keep domain types strict; narrow at query boundaries.

If this nullability is only due to specific queries, consider mapping API results to a stricter UI/domain type (with a fallback author) at the data layer instead of loosening the shared type. Given the migration focus, feel free to defer.

frontend/src/types/healthMetrics.ts (1)

30-30: Self-document createdAt format (optional)

If this is ISO‑8601, consider a branded alias to improve readability and reduce misuse.

Apply:

+export type ISODateString = string // e.g., 2025-09-22T12:34:56Z
 export type HealthMetricsProps = {
   ...
-  createdAt?: string
+  createdAt?: ISODateString
   ...
 }

frontend/src/types/mentorship.ts (1)

2-3: Import these enums as types; optionally re-export to avoid eslint disable

Generated file exports runtime enums, but this file uses them only in type positions — switch to a type-only import.

Apply this minimal diff:

-// eslint-disable-next-line no-restricted-imports
-import { ExperienceLevelEnum, ProgramStatusEnum } from './__generated__/graphql'
+// eslint-disable-next-line no-restricted-imports
+import type { ExperienceLevelEnum, ProgramStatusEnum } from './__generated__/graphql'

Optional follow-up (separate change): create frontend/src/types/graphql.ts

// re-export types to avoid importing from __generated__ all over
export type { ExperienceLevelEnum, ProgramStatusEnum } from './__generated__/graphql'

Then update this file:

-// eslint-disable-next-line no-restricted-imports
-import type { ExperienceLevelEnum, ProgramStatusEnum } from './__generated__/graphql'
+import type { ExperienceLevelEnum, ProgramStatusEnum } from 'types/graphql'

frontend/src/types/issue.ts (1)

7-7: Immutable labels: consider ReadonlyArray

Minor: if labels are not mutated, convey intent and help the compiler.

-  labels?: string[]
+  labels?: ReadonlyArray<string>

frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx (1)

56-56: Date casting should be verified for safety.

The cast of createdAt to string in the date formatting should be verified against the actual data type returned by the GraphQL query, especially given the scalar mapping configuration.

Based on the codegen configuration that maps Date/DateTime to 'string | number', this cast might be unsafe if the backend returns epoch seconds:

-      new Date(m.createdAt as string).toLocaleString('default', {
+      new Date(typeof m.createdAt === 'number' ? m.createdAt * 1000 : m.createdAt as string).toLocaleString('default', {

frontend/src/utils/structuredData.ts (2)

4-15: formatISODate: undefined and ms/sec handling; avoid throwing.

If createdAt/updatedAt are absent or already in milliseconds, current logic can throw or mis-convert. Make the helper accept undefined and auto-detect seconds vs milliseconds; return undefined instead of throwing so callers can omit the field.

Apply this diff:

-export const formatISODate = (input: number | string): string => {
-  const date =
-    typeof input === 'number'
-      ? new Date(input * 1000) // Unix timestamp in seconds
-      : new Date(input) // ISO date string
-
-  if (isNaN(date.getTime())) {
-    throw new Error('Invalid date')
-  }
-
-  return date.toISOString()
-}
+export const formatISODate = (input: number | string | undefined): string | undefined => {
+  if (input == null) return undefined
+  if (typeof input === 'number') {
+    // Heuristic: > 1e12 likely ms; else seconds.
+    const ms = input > 1_000_000_000_000 ? input : input * 1000
+    const d = new Date(ms)
+    return isNaN(d.getTime()) ? undefined : d.toISOString()
+  }
+  const d = new Date(input)
+  return isNaN(d.getTime()) ? undefined : d.toISOString()
+}

---

58-59: Avoid emitting sameAs: [undefined].

Only include sameAs when URL exists.

Apply this diff:

-      sameAs: [user.url],
+      ...(user.url && { sameAs: [user.url] }),

frontend/src/app/members/[memberKey]/page.tsx (1)

29-29: Initialize user state to null to avoid triple-state (undefined | null | User).

Current call without an initial value makes state possibly undefined and complicates checks.

Apply this diff:

-  const [user, setUser] = useState<User | null>()
+  const [user, setUser] = useState<User | null>(null)

frontend/src/app/settings/api-keys/page.tsx (3)

20-26: Use generated GraphQL types; drop legacy ApiKey type to prevent drift.

Stay consistent with codegen outputs to avoid mismatches and unsafe casts.

Apply this diff:

 import {
   CreateApiKeyDocument,
   GetApiKeysDocument,
   RevokeApiKeyDocument,
 } from 'types/__generated__/apiKeyQueries.generated'
-import { ApiKey } from 'types/apiKey'
+import type { GetApiKeysQuery } from 'types/__generated__/apiKeyQueries.generated'

---

37-37: Key-to-revoke state should use generated item type.

Aligns state with the query result shape.

Apply this diff:

-  const [keyToRevoke, setKeyToRevoke] = useState<ApiKey | null>(null)
+  const [keyToRevoke, setKeyToRevoke] = useState<GetApiKeysQuery['apiKeys'][0] | null>(null)

---

242-252: Drop explicit ApiKey annotation and unsafe casts; rely on codegen types.

Remove the manual type on map and string casts—codegen already types uuid/createdAt/expiresAt as strings.

Apply this diff:

-                  {data.apiKeys.map((key: ApiKey) => (
+                  {data.apiKeys.map((key) => (
                     <tr
-                      key={key.uuid as string}
+                      key={key.uuid}
                       className="border-b border-b-gray-200 dark:border-b-gray-700"
                     >
                       <td className="py-3">{key.name}</td>
-                      <td className="py-3 font-mono text-sm">{key.uuid as string}</td>
-                      <td className="py-3">{format(new Date(key.createdAt as string), 'PP')}</td>
+                      <td className="py-3 font-mono text-sm">{key.uuid}</td>
+                      <td className="py-3">{format(new Date(key.createdAt), 'PP')}</td>
                       <td className="py-3">
-                        {key.expiresAt ? format(new Date(key.expiresAt as string), 'PP') : 'Never'}
+                        {key.expiresAt ? format(new Date(key.expiresAt), 'PP') : 'Never'}
                       </td>

frontend/src/app/snapshots/[id]/page.tsx (3)

138-142: Use numeric zIndex.

Style props expect a number; '0' is a string.

Apply:

-              style={{ height: '400px', width: '100%', zIndex: '0' }}
+              style={{ height: '400px', width: '100%', zIndex: 0 }}

---

145-147: Remove stray text node.

The lone {' '} is noise and can trip linters.

Apply:

-            {' '}
             {snapshot.newChapters.filter((chapter) => chapter.isActive).map(renderChapterCard)}

---

12-12: Import SnapshotDetails as a type

tsconfig.json (frontend/tsconfig.json) does not set preserveValueImports/verbatimModuleSyntax/importsNotUsedAsValues — still use an explicit type import to avoid runtime import issues.

File: frontend/src/app/snapshots/[id]/page.tsx

-import { SnapshotDetails } from 'types/snapshot'
+import type { SnapshotDetails } from 'types/snapshot'

frontend/src/app/my/mentorship/programs/[programKey]/page.tsx (3)

13-13: Align local state types to generated query types to avoid drift.

Prefer types derived from GetProgramAndModulesQuery so state matches the actual selection set.

-import { Program, Module } from 'types/mentorship'
+import type { GetProgramAndModulesQuery } from 'types/__generated__/graphql'

And later:

-const [program, setProgram] = useState<Program | null>(null)
-const [modules, setModules] = useState<Module[]>([])
+type ProgramT = NonNullable<GetProgramAndModulesQuery['getProgram']>
+type ModuleT = GetProgramAndModulesQuery['getProgramModules'][number]
+const [program, setProgram] = useState<ProgramT | null>(null)
+const [modules, setModules] = useState<ModuleT[]>([])

---

31-33: Resolve the TODO or remove it to keep migration clean.

If you plan to rely on refetchQueries, drop the TODO; otherwise implement an update/optimisticResponse for cache sync.

I can wire an optimistic response for status flips if you want a follow‑up patch.

---

2-2: Prefer root Apollo hooks export ('@apollo/client') instead of '@apollo/client/react'.

Project uses @apollo/[email protected] (frontend/pnpm-lock.yaml); change the import in frontend/src/app/my/mentorship/programs/[programKey]/page.tsx from
import { useMutation, useQuery } from '@apollo/client/react'
to
import { useMutation, useQuery } from '@apollo/client'.

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2178
File: frontend/src/app/snapshots/[id]/page.tsx:0-0
Timestamp: 2025-09-21T17:04:48.154Z
Learning: User rudransh-shrivastava confirmed that suggested type safety improvements during Apollo Client migration were no longer relevant, reinforcing their preference to keep migration PRs focused on core migration changes rather than additional improvements.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2178
File: frontend/src/app/about/page.tsx:47-53
Timestamp: 2025-09-21T11:34:33.377Z
Learning: User rudransh-shrivastava prefers to keep Apollo Client migration PRs focused solely on migration-related changes and not include additional bug fixes or improvements that aren't directly related to the migration itself.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS is actively used in frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx for program editing functionality and cannot be removed. It serves a different purpose than GET_PROGRAM_ADMIN_DETAILS, providing comprehensive program information needed for editing.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS and GET_PROGRAM_ADMIN_DETAILS are two separate queries serving different purposes: GET_PROGRAM_DETAILS fetches comprehensive program information while GET_PROGRAM_ADMIN_DETAILS fetches only admin-related details. These queries cannot be removed or merged as they serve different use cases in the application.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS and GET_PROGRAM_ADMIN_DETAILS are two separate queries serving different purposes: GET_PROGRAM_DETAILS fetches comprehensive program information while GET_PROGRAM_ADMIN_DETAILS fetches only admin-related details.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/components/ModuleCard.tsx:53-55
Timestamp: 2025-07-13T07:31:06.511Z
Learning: In Next.js 13+ app router, useRouter from 'next/navigation' does not provide asPath or query properties. Use useParams to extract route parameters and usePathname to get the current pathname instead.

Learnt from: ahmedxgouda
PR: OWASP/Nest#1633
File: frontend/src/components/HealthMetrics.tsx:30-30
Timestamp: 2025-06-20T16:12:59.256Z
Learning: In the DetailsCard component (frontend/src/components/CardDetailsPage.tsx), there's a length check before rendering HealthMetrics: `healthMetricsData.length > 0`. This ensures that when HealthMetrics is rendered, the data array has at least one element, making accessing data[0] safe within the HealthMetrics component.

Learnt from: ahmedxgouda
PR: OWASP/Nest#1633
File: frontend/src/components/HealthMetrics.tsx:30-30
Timestamp: 2025-06-20T16:12:59.256Z
Learning: In the DetailsCard component (frontend/src/components/CardDetailsPage.tsx), there's a safety check that ensures HealthMetrics component is only rendered when healthMetricsData exists and has at least one element: `healthMetricsData && healthMetricsData.length > 0`. This makes accessing data[0] safe within the HealthMetrics component.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: backend/apps/mentorship/graphql/mutations/program.py:41-44
Timestamp: 2025-07-08T17:24:36.501Z
Learning: In the mentorship program GraphQL mutations, date validation is handled at the GraphQL schema/node level in the input types (CreateProgramInput, UpdateProgramInput), preventing null values from reaching the mutation logic where date comparisons are performed.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/app/mentorship/programs/page.tsx:59-61
Timestamp: 2025-07-13T11:29:25.245Z
Learning: In Next.js 13+ app router, components with the 'use client' directive run entirely on the client side and don't require window object existence checks or SSR hydration considerations. Direct access to window.location and other browser APIs is safe in client components.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2178
File: frontend/src/app/snapshots/[id]/page.tsx:0-0
Timestamp: 2025-09-21T17:04:48.154Z
Learning: User rudransh-shrivastava confirmed that suggested type safety improvements during Apollo Client migration were no longer relevant, reinforcing their preference to keep migration PRs focused on core migration changes rather than additional improvements.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2178
File: frontend/src/app/about/page.tsx:47-53
Timestamp: 2025-09-21T11:34:33.377Z
Learning: User rudransh-shrivastava prefers to keep Apollo Client migration PRs focused solely on migration-related changes and not include additional bug fixes or improvements that aren't directly related to the migration itself.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/app/mentorship/programs/page.tsx:14-14
Timestamp: 2025-07-13T11:34:31.823Z
Learning: In the Next.js frontend mentorship application, there are two distinct types for authentication-related data: ExtendedSession for useSession hook (containing accessToken and user.login properties) and UserRolesData for useUserRoles hook (containing currentUserRoles.roles array). The correct access pattern for GitHub username is `(session as ExtendedSession)?.user?.login`.

frontend/src/app/snapshots/[id]/page.tsx (3)

2-2: Confirm import path choice for Apollo v4 hooks.

Both '@apollo/client' and '@apollo/client/react' work in v4. The docs generally show root imports; mixing entrypoints across files can increase bundle duplication. If consistency is a goal, consider the root import.

- import { useQuery } from '@apollo/client/react'
+ import { useQuery } from '@apollo/client'

---

12-12: Make SnapshotDetails a type-only import.

Avoids creating a runtime import for a type-only symbol.

- import { SnapshotDetails } from 'types/snapshot'
+ import type { SnapshotDetails } from 'types/snapshot'

---

145-146: Remove stray whitespace text node in JSX.

The {' '} fragment adds an unnecessary text child and may trip linters.

-            {' '}
             {snapshot.newChapters.filter((chapter) => chapter.isActive).map(renderChapterCard)}

frontend/src/app/mentorship/programs/[programKey]/page.tsx (2)

8-8: Use type‑only import to avoid bundling the types module

Prevents accidental runtime import and improves tree‑shaking.

-import { Program, Module } from 'types/mentorship'
+import type { Program, Module } from 'types/mentorship'

---

14-14: Prefer typed useParams over assertion (match modules page)

Consistent, safer typing without a cast.

-const { programKey } = useParams() as { programKey: string }
+const { programKey } = useParams<{ programKey: string }>()

frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx (2)

8-8: Type‑only import for Module

Avoids emitting a runtime import.

-import { Module } from 'types/mentorship'
+import type { Module } from 'types/mentorship'

---

17-17: Optional: type admins state

If DetailsCard expects a Contributor[] (likely), type it to preserve inference.

-const [admins, setAdmins] = useState(null)
+import type { Contributor } from 'types/mentorship'
+const [admins, setAdmins] = useState<Contributor[] | null>(null)

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2178
File: frontend/src/app/snapshots/[id]/page.tsx:0-0
Timestamp: 2025-09-21T17:04:48.154Z
Learning: User rudransh-shrivastava confirmed that suggested type safety improvements during Apollo Client migration were no longer relevant, reinforcing their preference to keep migration PRs focused on core migration changes rather than additional improvements.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2178
File: frontend/src/app/about/page.tsx:47-53
Timestamp: 2025-09-21T11:34:33.377Z
Learning: User rudransh-shrivastava prefers to keep Apollo Client migration PRs focused solely on migration-related changes and not include additional bug fixes or improvements that aren't directly related to the migration itself.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2178
File: frontend/src/app/snapshots/[id]/page.tsx:0-0
Timestamp: 2025-09-21T17:04:48.154Z
Learning: User rudransh-shrivastava confirmed that suggested type safety improvements during Apollo Client migration were no longer relevant, reinforcing their preference to keep migration PRs focused on core migration changes rather than additional improvements.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2178
File: frontend/src/app/about/page.tsx:47-53
Timestamp: 2025-09-21T11:34:33.377Z
Learning: User rudransh-shrivastava prefers to keep Apollo Client migration PRs focused solely on migration-related changes and not include additional bug fixes or improvements that aren't directly related to the migration itself.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS is actively used in frontend/src/app/my/mentorship/programs/[programKey]/edit/page.tsx for program editing functionality and cannot be removed. It serves a different purpose than GET_PROGRAM_ADMIN_DETAILS, providing comprehensive program information needed for editing.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS and GET_PROGRAM_ADMIN_DETAILS are two separate queries serving different purposes: GET_PROGRAM_DETAILS fetches comprehensive program information while GET_PROGRAM_ADMIN_DETAILS fetches only admin-related details. These queries cannot be removed or merged as they serve different use cases in the application.

Learnt from: rudransh-shrivastava
PR: OWASP/Nest#2155
File: frontend/src/server/queries/programsQueries.ts:81-81
Timestamp: 2025-08-31T13:47:15.861Z
Learning: In frontend/src/server/queries/programsQueries.ts, GET_PROGRAM_DETAILS and GET_PROGRAM_ADMIN_DETAILS are two separate queries serving different purposes: GET_PROGRAM_DETAILS fetches comprehensive program information while GET_PROGRAM_ADMIN_DETAILS fetches only admin-related details.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: backend/apps/mentorship/graphql/mutations/program.py:41-44
Timestamp: 2025-07-08T17:24:36.501Z
Learning: In the mentorship program GraphQL mutations, date validation is handled at the GraphQL schema/node level in the input types (CreateProgramInput, UpdateProgramInput), preventing null values from reaching the mutation logic where date comparisons are performed.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/components/ModuleCard.tsx:53-55
Timestamp: 2025-07-13T07:31:06.511Z
Learning: In Next.js 13+ app router, useRouter from 'next/navigation' does not provide asPath or query properties. Use useParams to extract route parameters and usePathname to get the current pathname instead.

Learnt from: Rajgupta36
PR: OWASP/Nest#1717
File: frontend/src/app/mentorship/programs/page.tsx:59-61
Timestamp: 2025-07-13T11:29:25.245Z
Learning: In Next.js 13+ app router, components with the 'use client' directive run entirely on the client side and don't require window object existence checks or SSR hydration considerations. Direct access to window.location and other browser APIs is safe in client components.

Learnt from: ahmedxgouda
PR: OWASP/Nest#1633
File: frontend/src/components/HealthMetrics.tsx:30-30
Timestamp: 2025-06-20T16:12:59.256Z
Learning: In the DetailsCard component (frontend/src/components/CardDetailsPage.tsx), there's a length check before rendering HealthMetrics: `healthMetricsData.length > 0`. This ensures that when HealthMetrics is rendered, the data array has at least one element, making accessing data[0] safe within the HealthMetrics component.

Learnt from: ahmedxgouda
PR: OWASP/Nest#1633
File: frontend/src/components/HealthMetrics.tsx:30-30
Timestamp: 2025-06-20T16:12:59.256Z
Learning: In the DetailsCard component (frontend/src/components/CardDetailsPage.tsx), there's a safety check that ensures HealthMetrics component is only rendered when healthMetricsData exists and has at least one element: `healthMetricsData && healthMetricsData.length > 0`. This makes accessing data[0] safe within the HealthMetrics component.

frontend/__tests__/unit/utils/structuredData.test.ts (3)

1-1: Use type‑only import for clarity and to avoid accidental value import.
Switch to import type since User is a type alias.

-import { User } from 'types/user'
+import type { User } from 'types/user'

---

10-19: Fix mockUser date fields to match expected normalized ISO timestamps.
Your expectations use epoch+2020s and +2021s (1970-01-01T00:33:40Z / 00:33:41Z). Update the fixture to numbers to avoid mismatch.

-  createdAt: '2020-01-01T00:00:00Z',
+  createdAt: 2020,
   email: '[email protected]',
@@
-  updatedAt: '2021-02-03T00:00:00Z',
+  updatedAt: 2021,

If formatISODate treats numbers as seconds (not ms), this will pass. If it expects ms, use 2000 and 2001 seconds × 1000 respectively. Please run the unit tests to confirm.

---

61-72: Fix minimalUser date fields to match expected normalization.
Mirror the same numeric dates so the second test remains consistent.

-  createdAt: '2020-01-01T00:00:00Z',
+  createdAt: 2020,
@@
-  updatedAt: '2021-02-03T00:00:00Z',
+  updatedAt: 2021,

frontend/__tests__/unit/pages/MyMentorship.test.tsx (1)

33-33: Casting via unknown works; optionally prefer jest.MockedFunction typing.
Keeps types tighter without double cast.

Apply if desired:

-const mockUseQuery = useQuery as unknown as jest.Mock
+const mockUseQuery = useQuery as jest.MockedFunction<typeof useQuery>

If this trips on generics/overloads in your tsconfig, keep the current cast to stay unblocked for migration.

frontend/__tests__/unit/pages/ProjectsHealthDashboardMetrics.test.tsx (1)

64-69: Optional: DRY the useQuery mock cast

Avoid repeating (useQuery as unknown as jest.Mock) by defining a single typed alias and reusing it.

Add once near the imports:

const mockedUseQuery = useQuery as unknown as jest.Mock

Then update the call sites:

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+    mockedUseQuery.mockReturnValue({

(Apply the same replacement at Lines 75, 88, and 177.)

Also applies to: 75-80, 88-93, 177-182

frontend/__tests__/unit/pages/ProjectDetails.test.tsx (2)

46-46: Remove repetitive double-casts by aliasing the mock once.

Define a typed alias once and use it, improving readability and avoiding repeated casts.

Apply this diff for the repeated usage lines:

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+    useQueryMock.mockReturnValue({

Add this alias near the top (after imports):

const useQueryMock = useQuery as unknown as jest.Mock

Also applies to: 58-58, 72-72, 89-89, 156-156, 171-171, 197-197, 218-218, 264-264, 280-280

---

58-61: Set loading explicitly for the loading-state test.

To avoid relying on component internals, return loading: true when asserting the spinner.

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
-      data: null,
-      error: null,
-    })
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+      data: null,
+      loading: true,
+      error: null,
+    })

frontend/__tests__/unit/pages/EditModule.test.tsx (1)

26-29: Preserve all exports when mocking @apollo/client.

Spread the actual module to avoid unintentionally nulling other exports used transitively (e.g., gql, types, utility fns).

-jest.mock('@apollo/client', () => ({
-  useApolloClient: jest.fn(),
-  gql: jest.requireActual('@apollo/client').gql,
-}))
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useApolloClient: jest.fn(),
+}))

frontend/__tests__/unit/pages/ModuleDetails.test.tsx (1)

34-34: Casting approach is fine; optional stronger typing.

Current cast is acceptable. Optionally, tighten typing if TS allows:

-  const mockUseQuery = useQuery as unknown as jest.Mock
+  const mockUseQuery = useQuery as unknown as jest.MockedFunction<typeof useQuery>

frontend/__tests__/unit/pages/SnapshotDetails.test.tsx (4)

8-11: Mocking the React entrypoint looks good; reduce repeated casts.

To avoid repeating (useQuery as unknown as jest.Mock) everywhere, create a single alias:

Add near the imports:

const mockUseQuery = useQuery as unknown as jest.Mock

Then replace usages with mockUseQuery.mockReturnValue(...).

---

51-56: Fix brittle loading assertion (getAllByAltText evaluated too early).

getAllByAltText is called before the waitFor, so the test can fail immediately if the spinner renders asynchronously. Use findAllByAltText or move the query inside waitFor.

Replace the assertion block with one of:

// Option A (preferred)
const loadingSpinner = await screen.findAllByAltText('Loading indicator')
expect(loadingSpinner.length).toBeGreaterThan(0)

// Option B
await waitFor(() => {
  expect(screen.getAllByAltText('Loading indicator').length).toBeGreaterThan(0)
})

---

66-69: Be explicit about loading=false to avoid flakiness.

Not required, but adding loading: false makes intent clear if the component branches on loading.

---

83-86: Use an Error/ApolloError instance for the error shape.

Right now error is { error: Error }. If the component checks error.message or expects an ApolloError, this may misbehave.

Consider:

import { ApolloError } from '@apollo/client'
// ...
const mockError = new ApolloError({ errorMessage: 'GraphQL error' })
// ...
(useQuery as unknown as jest.Mock).mockReturnValue({
  data: null,
  error: mockError,
})

Or, minimally:

const mockError = new Error('GraphQL error')
// ...
error: mockError,

frontend/__tests__/unit/pages/ProgramDetailsMentorship.test.tsx (1)

23-23: DRY the repeated casts by defining a single typed mock for useQuery.

Keeps casts in one place and improves readability.

Apply this change here:

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+    mockedUseQuery.mockReturnValue({
       data: mockProgramDetailsData,
       loading: false,
       refetch: jest.fn(),
     })

Add this once near the imports (outside describe):

// after imports
const mockedUseQuery = useQuery as unknown as jest.MockedFunction<typeof useQuery>

frontend/__tests__/unit/pages/CreateProgram.test.tsx (1)

37-37: Prefer typed mock helper over double-cast

Use jest.mocked for cleaner typing and readability.

-    ;(useMutation as unknown as jest.Mock).mockReturnValue([mockCreateProgram, { loading: false }])
+    jest.mocked(useMutation).mockReturnValue([mockCreateProgram, { loading: false }])

frontend/__tests__/unit/pages/ModuleDetailsPage.test.tsx (1)

34-34: Prefer precise typing over unknown as jest.Mock.

Use jest.MockedFunction for safer typings.

Apply:

-  const mockUseQuery = useQuery as unknown as jest.Mock
+  const mockUseQuery = useQuery as jest.MockedFunction<typeof useQuery>

frontend/__tests__/unit/pages/CommitteeDetails.test.tsx (1)

39-49: Fix potential flakiness in loading-spinner assertion.

Capturing elements before waiting can throw; use findAllBy* or assert inside waitFor.

Apply:

-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
-    await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
-    })
+    const loadingSpinner = await screen.findAllByAltText('Loading indicator')
+    expect(loadingSpinner.length).toBeGreaterThan(0)

frontend/__tests__/unit/pages/ProjectHealthDashboardMetricsDetails.test.tsx (1)

40-44: Avoid repeating casts; create a local mock alias for useQuery

Define a typed alias once and use it across tests to reduce noise.

Apply this diff to the current line:

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+    ;mockUseQuery.mockReturnValue({

Add this helper near the top (e.g., after the Apollo mock):

// place once near the mocks
const mockUseQuery = useQuery as unknown as jest.Mock;

frontend/__tests__/unit/pages/ProjectsHealthDashboardOverview.test.tsx (4)

35-37: Mock error shape should be an Error (or ApolloError), not { error: Error }

Use a direct Error to better match useQuery’s error type and typical component checks.

Apply:

-const mockError = {
-  error: new Error('GraphQL error'),
-}
+const mockError = new Error('GraphQL error')

---

41-46: Casting works; optional: tighten typing with jest.MockedFunction

This avoids double-casting to unknown and preserves useQuery’s call signature in mocks.

Apply:

-;(useQuery as unknown as jest.Mock).mockReturnValue({
+;(useQuery as unknown as jest.MockedFunction<typeof useQuery>).mockReturnValue({
   data: mockProjectsDashboardOverviewData,
   loading: false,
   error: null,
 })

---

52-56: Same optional typing improvement for the loading state mock

Keeps mocks consistently typed.

Apply:

-;(useQuery as unknown as jest.Mock).mockReturnValue({
+;(useQuery as unknown as jest.MockedFunction<typeof useQuery>).mockReturnValue({
   data: null,
   loading: true,
   error: null,
 })

---

65-69: Error state mock: align with direct Error instance

After adjusting mockError to Error, this will better reflect runtime behavior and component expectations.

Optionally, use .mockReturnValueOnce(...) here to avoid cross-test bleed and rely on the default set in beforeEach.

frontend/__tests__/unit/pages/UserDetails.test.tsx (1)

47-47: Explicitly set loading in all useQuery mocks; fix the loading-state test; optional typed helper to reduce casts.

• Some overrides omit loading. Be explicit to avoid fragile tests if component logic changes.
• The “renders loading state” test should mock loading: true to reflect intent.

Apply this diff for the loading test:

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
-      data: null,
-      error: null,
-    })
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+      data: null,
+      error: null,
+      loading: true,
+    })

Apply this diff for the error test:

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
-      data: null,
-      error: mockError,
-    })
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+      data: null,
+      error: mockError,
+      loading: false,
+    })

Optional (to reduce repeated casts):

// near the top of the file
const mockedUseQuery = useQuery as unknown as jest.Mock;

// usage
mockedUseQuery.mockReturnValue({ data: ..., loading: false, error: null })

Also applies to: 63-66, 76-83, 102-106, 123-127, 141-145, 159-163, 181-185, 205-209, 232-236, 255-258, 270-273, 339-343, 357-361, 376-380, 395-398, 412-416, 430-433, 452-456, 477-481, 492-495

frontend/__tests__/unit/pages/CreateModule.test.tsx (2)

59-66: Prefer precise mock typing over unknown casts.

Use jest.MockedFunction to avoid unsafe unknown as jest.Mock casts.

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+    ;(useQuery as jest.MockedFunction<typeof useQuery>).mockReturnValue({
       data: {
         getProgram: {
           admins: [{ login: 'admin-user' }],
         },
       },
       loading: false,
     })

---

67-70: Type the mutation mock tuple precisely.

This keeps the mock shape aligned with Apollo’s useMutation return type.

-    ;(useMutation as unknown as jest.Mock).mockReturnValue([
+    ;(useMutation as jest.MockedFunction<typeof useMutation>).mockReturnValue([
       mockCreateModule.mockResolvedValue({}),
       { loading: false },
     ])

frontend/__tests__/unit/pages/RepositoryDetails.test.tsx (2)

49-60: Set loading: true and avoid pre-querying before waitFor in the loading test.
Currently the mock omits loading, and getAllByAltText is called before the UI can update.

Apply this diff to set loading explicitly:

-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
-      data: null,
-      error: null,
-    })
+    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+      data: null,
+      loading: true,
+      error: null,
+    })

Optionally, prefer an async query to reduce flakiness:

// Replace the getAllByAltText + waitFor with:
const loadingSpinner = await screen.findAllByAltText('Loading indicator')
expect(loadingSpinner.length).toBeGreaterThan(0)

---

82-86: Use an Error (or ApolloError) directly for the error field.
Passing { error: Error } nests the error and may not match expectations.

Apply this diff to pass the actual error:

-      error: mockError,
+      error: mockError.error,

Alternatively, construct an ApolloError if you want closer parity with v4:

import { ApolloError } from '@apollo/client'
// ...
error: new ApolloError({ networkError: new Error('GraphQL error') }),

frontend/__tests__/unit/pages/EditProgram.test.tsx (1)

38-38: Prefer typed mocking to avoid unknown as jest.Mock casts

Use jest.mocked(useQuery) or MockedFunction<typeof useQuery> for type-safe returns.

Example:

import type { MockedFunction } from 'jest-mock'
const mockUseQuery = useQuery as unknown as MockedFunction<typeof useQuery>
mockUseQuery.mockReturnValue({ loading: true } as any)

frontend/__tests__/unit/pages/ProgramDetails.test.tsx (1)

23-27: Avoid repeated casts by extracting a typed alias once.

Define a single const and reuse to reduce repetition.

Apply this diff here and reuse the alias throughout the file:

 describe('ProgramDetailsPage', () => {
+  const mockUseQuery = useQuery as unknown as jest.Mock
   beforeEach(() => {
-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+    mockUseQuery.mockReturnValue({
       data: mockProgramDetailsData,
       loading: false,
       refetch: jest.fn(),
     })
   })

Change other occurrences similarly (see Lines 35 and 48).

frontend/__tests__/unit/pages/Home.test.tsx (1)

73-78: Extract a single mock alias to avoid repeated casts.

Define mockUseQuery once and reuse.

Apply:

 describe('Home', () => {
   let mockRouter: { push: jest.Mock }
 
   beforeEach(() => {
-    ;(useQuery as unknown as jest.Mock).mockReturnValue({
+    const mockUseQuery = useQuery as unknown as jest.Mock
+    mockUseQuery.mockReturnValue({
       data: mockGraphQLData,
       loading: false,
       error: null,
     })

Replicate for other occurrences below (Lines 88, 113, 196, 248).

frontend/__tests__/unit/pages/ApiKeysPage.test.tsx (1)

51-52: Typed aliases for mocks improve clarity.

Good pattern; consider jest.MockedFunction<typeof useQuery/useMutation> for tighter typing (optional).

-const mockUseQuery = useQuery as unknown as jest.Mock
-const mockUseMutation = useMutation as unknown as jest.Mock
+const mockUseQuery = useQuery as jest.MockedFunction<typeof useQuery>
+const mockUseMutation = useMutation as jest.MockedFunction<typeof useMutation>

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro